<template>
  <!-- 游戏设置 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row></template>
        <template v-slot:actions>
          <el-button v-permission="'game.add'" :disabled="dataList.length>1?true:false" type="primary" size="mini" icon="el-icon-plus" @click="isShowTypeDetails = true, checkedItem = null">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="ID" width="90"/>
          <el-table-column align="center" prop="a_game_remark" label="备注" width="180"/>
          <el-table-column align="center" prop="a_game_webname" label="游戏名称" width="180">
            <template slot-scope="scope">
              {{ languageArrayMap.get(scope.row.a_game_webname) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_game_switch" label="游戏状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.a_game_switch?'success':'info'">{{ scope.row.a_game_switch?'开启':'关闭' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_game_webintro" label="游戏简介" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ languageArrayMap.get(scope.row.a_game_webintro) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_game_matchinterval" label="匹配间隔时间(秒)" width="150"/>
          <el-table-column align="center" prop="a_game_begincountdown" label="开始倒计时(秒)" width="150"/>
          <el-table-column align="center" prop="a_game_minnum" label="开始最小数" width="150"/>
          <el-table-column align="center" prop="a_game_operationcountdown" label="操作倒计时" width="150"/>
          <el-table-column align="center" prop="a_game_nooperationlimit" label="无操作上限时间" width="150"/>
          <el-table-column align="center" prop="a_game_webjump" label="web页面跳转地址" width="150" show-overflow-tooltip/>
          <el-table-column align="center" prop="a_game_webicon" label="web图标" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <img v-if="scope.row.a_game_webicon" :src="scope.row.a_game_webicon" alt="" style="width:40px;height:40px;">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_game_webpic" label="web背景图" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <img v-if="scope.row.a_game_webpic" :src="scope.row.a_game_webpic" alt="" style="width:40px;height:40px;">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="appposition" label="app栏类型" width="240" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.appposition" :key="index">
                {{ appLabel(item.type) }}({{item.sort}})
              </span>
            </template>
          </el-table-column>
          <el-table-column align="left" fixed="right" prop="operation" label="操作" width="150">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'game.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)" icon="el-icon-edit-outline" />
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'game.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click="deleteItem(scope.row)" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <!-- 新增类型 -->
      <el-dialog :visible.sync="isShowTypeDetails" v-if="isShowTypeDetails" title="活动管理" width="50%" :before-close="onHideDetails" top="100px" :close-on-click-modal="false">
        <p class="box-title">游戏类型：</p>
        <el-radio-group v-model="gameType" :disabled="isDisabledGame">
          <el-radio class="margin10" :label="item.value" border v-for="(item, index) in GAME_TYPE" :key="index">{{item.label}}</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="onHideDetails(false)">取 消</el-button>
          <el-button size="medium" type="primary" @click="handleConfirm">确 认</el-button>
        </span>
      </el-dialog>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" :game_id="gameType" :languageArray="multilingualData" :cornerData="cornerData"/>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getGame,
  delGame
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
import {
  allAdminMultilingual
} from '@/api/game'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'

export default {
  name: 'gameManagement',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      GAME_TYPE,
      dataList:[],
      languageArrayMap: new Map(),
      multilingualData: [],
      cornerData:[
        {label:'不显示',value:0},
        {label:'新游戏',value:1},
        {label:'火爆',value:2},
      ],
      positionData:[
        {label:'普通游戏位',value:1},
        {label:'推广游戏位',value:2},
      ],
      imageData:[],
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      isDisabledGame: false,
      isShowTypeDetails: false,
      gameType:1,
      terminalType:1,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
      },
    }
  },
  created () {},
  activated () {
    this.getMultilingualList()
  },
  methods: {
    // 获取全部后台多语言
    async getMultilingualList () {
      let that = this;
      that.multilingualData = []
      const response = await allAdminMultilingual({})
      if (response.code == 1) {
        if(response.data){
          const languageArrayMap = new Map();
          response.data.forEach(s => {
            languageArrayMap.set(s.a_base_message_id, s.c_base_zh_cn);
          });
          that.multilingualData = response.data
          that.languageArrayMap = languageArrayMap;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.getDataList();
    },
    // 获取游戏设置列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getGame(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
            item.appposition=[]
            if(item.a_game_appposition){
              item.appposition=that.columnArr(item.a_game_appposition)
            }
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.isShowDetails = true
      that.checkedItem = row
      that.gameType = row.a_game_id
      that.handleCurrentChange(row)
    },
    // 删除
    deleteItem (row) {
      const that = this
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${row.a_game_remark}】配置?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGame({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.onHideDetails(true)
            that.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }).catch((err) => {})
    },
    // 选择配置类型
    handleConfirm(){
      this.isShowDetails = true
      this.isShowTypeDetails = false
    },
    // 图片配置
    appLabel(cellValue){
      return (this.positionData.find((item) => item.value == cellValue)?.label || "-");
    },
    columnArr(str){
      let arr = this.$public.srtToArr(str), arrData = [];
      if (arr[0] && typeof (arr[0]) == 'string') {
        arrData.push({ type: Number(arr[0]), sort: Number(arr[1])})
      } else {
        arr.map(item => {
          arrData.push({type: Number(item[0]), sort: Number(item[1])})
        })
      }
      return arrData
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      this.isShowTypeDetails = false
      if (show) {
        this.getDataList(true)
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
